<template>
  <view class="cu-card article" >
    <view class="cu-item shadow" v-for="item in mydata">
      <view class="content">
        <u-icon :name="item.name" color="#666" size="100"></u-icon>
        <view class="desc">
		  <view class="title" style="height: 30px;">{{item.title}}</view>
          <view class="text-content" style="height: 20px;margin-top: 10px; margin-left: 15px;">{{item.detail}} </view>
        </view>
		<view class="txt1">
				{{item.num}}
		</view>
      </view>
    </view>
  </view>
</template>

<script>


export default {
  data() { 
    return {
		mydata:[
			{
				title:'活动消息',
				detail:'你的地球活动福利来了',
				name:'gift',
				num:'9'
			},
			{
				title:'服务消息',
				detail:'您有一张优惠券到账了',
				name:'box',
				num:'7'
			},
			{
				title:'系统消息',
				detail:'秒杀专区下线通告',
				name:'box',
				num:'2'
			},
		],

      trackList: [1,2,3], //足迹列表
    };
  },

  /**
   * 滑到底部加载下一页数据
   */
  onReachBottom() {

  },
  onLoad() {

  },
  methods: {
  },

};
</script>

<style lang="scss" scoped>
@import "./main.css";
.txt1{
	text-align: center;
	border-radius: 50%; 
	background-color: #0081FF; 
	margin-top: auto;
	color: white;
	font-size: 25px;
	height: 30px;
	width: 30px;
}
.txt{
	margin-top: auto;
	color: lightgrey;
	font-size: 40px;
}
</style>
